<template>
  <div class="scroll-y">
    <span>纵向滚动</span>
    <!-- <div class="scroll-list-wrap">
      <cube-scroll ref="scroll" :data="items" :options="options">
      </cube-scroll>
    </div> -->
    <button @click="scrollTo">scrollTo</button>
    <div style=" position: relative;"><button @click="showMoreModelHandler" class="more-btn">更多</button></div>
    <div class="show-model-shadow" v-if="showMore" @click="showMore = false"></div>
    <div class="model-container" v-if="showMore">
      <div class="model-logo"></div>
      <div class="model-content">
        <div class="model-content-item">
          <span>😁</span>
          <div>新建</div>
        </div>
        <div class="model-content-item">
          <span>🙈</span>
          <div>编辑</div>
        </div>
        <div class="model-content-item">
          <span>😐</span>
          <div>更多</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const _data = [
  "😀 😁 😂 🤣 😃 🙃 ",
  "👈🏻  scroll 👉🏻 ",
  "🙂 🤔 😄 🤨 😐 🙃 ",
  "👈🏻  scroll 👉🏻 ",
  "😔 😕 🙃 🤑 😲 ☹️ ",
  "👈🏻  scroll 👉🏻 ",
  "🐣 🐣 🐣 🐣 🐣 🐣 ",
  "👈🏻  scroll 👉🏻 ",
  "🐥 🐥 🐥 🐥 🐥 🐥 ",
  "👈🏻  scroll 👉🏻 ",
  "🤓 🤓 🤓 🤓 🤓 🤓 ",
  "👈🏻  scroll 👉🏻 ",
  "🦔 🦔 🦔 🦔 🦔 🦔 ",
  "👈🏻  scroll 👉🏻 ",
  "🙈 🙈 🙈 🙈 🙈 🙈 ",
  "👈🏻  scroll 👉🏻 ",
  "🚖 🚖 🚖 🚖 🚖 🚖 ",
  "👈🏻  scroll 👉🏻 ",
  "✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ",
];
export default {
  name: "ScrollY",
  props: {
    msg: String
  },
  data() {
    return {
      items: _data,
      scrollbar: true,
      scrollbarFade: true,
      startY: 0,
      scrollToY: -200,
      scrollToTime: 700,
      showMore: false
    };
  },
  methods: {
    rebuildScroll() {
      this.nextTick(() => {
        this.$refs.scroll.destroy()
        this.$refs.scroll.initScroll()
      })
    },
    scrollTo() {
      this.$refs.scroll.scrollTo(
        0,
        this.scrollToY,
        this.scrollToTime
      )
    },
    showMoreModelHandler() {
      console.log('showMoreModelHandler')
      this.showMore = !this.showMore
    }
  },
  computed: {
    options() {
      console.log('options:', this.scrollbarObj)
      return {
        scrollbar: this.scrollbarObj,
        startY: this.startY
      }
    },
    scrollbarObj: function() {
      return this.scrollbar ? { fade: this.scrollbarFade } : false
    }
  },
  watch: {
    scrollbarObj: {
      handler() {
        this.rebuildScroll()
      },
      deep: true
    },
    startY() {
      this.rebuildScroll()
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
  .scroll-list-wrap {
    height: 350px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transform: rotate(0deg);
    overflow: hidden;
  }
  .show-model-shadow {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #25262d;
    opacity: 0.4;
    z-index: 1002;
    width: 100%;
    height: 100%;
  }
  .model-container {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 15px;
    right: 15px;
    z-index: 1004;
    .model-logo {
      position: absolute;
      top: 3px;
      right: 15px;
      width: 0;
      height: 0;
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent #fff transparent;
    }
    .model-content {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      position: absolute;
      top: 15px;
      right: 0px;
      width: 40%;
      padding: 5px 8px;
      border-radius: 5px;
      .model-content-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        span {
          color: #999;
          padding: 10px;
        }
        div {
          border-bottom: 1px solid #eee;
          flex: 1;
          margin-left: 16px;
          height: 40px;
          line-height: 40px;
          font-size: 12px;
          padding-right: 5px;
        }
      }
    }
  }
  .more-btn {
    position: absolute;
    right: 15px;
    top: 0;
  }
</style>
